<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>#{addRecipeDialog.title}</title>
</h:head>

<h:body>
	<h:outputStylesheet library="css" name="addRecipe.css" />
	<h:form id="addRecipeForm">
		<p:fieldset legend="Általános">
			<h:panelGrid columns="3" >
				<p:outputLabel value="Név" for="recipeNameInput"
					id="recipeNameLabel" />
				<p:inputText id="recipeNameInput"
					value="#{addRecipeDialog.recipe.name}" />
				<p:message for="recipeNameInput" />
				<p:outputLabel value="Adag" for="dose" />
				<pe:inputNumber id="dose" maxValue="100"
					value="#{addRecipeDialog.recipe.dose}" decimalPlaces="0" />
				<p:message for="dose" />
				<p:outputLabel value="Ár" for="priceRating" />
				<p:rating id="priceRating"
					value="#{addRecipeDialog.recipe.priceRating}" />
				<p:message for="priceRating" />
				<p:outputLabel value="Elkészítés" for="preparationRating" />
				<p:rating id="preparationRating"
					value="#{addRecipeDialog.recipe.preparationRating}" />
				<p:message for="preparationRating" />
			</h:panelGrid>
			<pe:tooltip global="true" position="left center" targetPosition="right center" forSelector=".ui-state-error"/>
		</p:fieldset>
		<p:fieldset legend="Elkészítés" style="margin-top: 10px">
			<p:editor id="editor" value="#{addRecipeDialog.recipe.description}"
				width="600" />
		</p:fieldset>
		<p:fieldset legend="Hozzávalók" style="margin-top: 10px">
			<h:panelGroup layout="block" id="entrydiv">
			<p:messages id="ingredientsMsgs" />
				<p:selectOneMenu id="food" filter="true" filterMatchMode="contains"
					value="#{addRecipeDialog.recipeEntry.food}"> 
					<f:converter binding="#{foodConverter}" />
					<f:selectItem itemLabel="" itemValue="" />
					<f:selectItems value="#{addRecipeDialog.findFoods()}" />
				</p:selectOneMenu>
				<p:message for="food" />
				<h:panelGrid columns="3">
					<p:outputLabel for="quantity" value="Mennyiség" />
					<pe:inputNumber id="quantity"
						value="#{addRecipeDialog.recipeEntry.quantity}" decimalPlaces="0"
						max="9999">
					</pe:inputNumber>
					<p:message for="quantity" />
				</h:panelGrid>
				<p:commandButton value="Hozzáad">
					<p:ajax event="click" listener="#{addRecipeDialog.addEntry()}"
						update=":addRecipeForm:ingredients :addRecipeForm:food :addRecipeForm:quantity :addRecipeForm:ingredientsMsgs"
						process=":addRecipeForm:quantity :addRecipeForm:food @this"></p:ajax>
				</p:commandButton>
			</h:panelGroup>
			<p:dataTable id="ingredients"
				value="#{addRecipeDialog.recipe.ingredients}" var="entry"
				editable="true" itemValue="#{entry}">
				<p:ajax event="rowEdit" update="ingredients" render="ingredients" />
				<p:column headerText="Hozzávalók">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{entry.food.name}" />
						</f:facet>
						<f:facet name="input">
							<p:selectOneMenu id="food" filter="true"
								filterMatchMode="contains" value="#{entry.food}">
								<f:converter binding="#{foodConverter}" />
								<f:selectItem itemLabel="" itemValue="" />
								<f:selectItems value="#{addRecipeDialog.findFoods()}" />
							</p:selectOneMenu>
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Mennyiség">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText
								value="#{entry.quantity} #{entry.food.unitOfMeasurement.name}" />
						</f:facet>
						<f:facet name="input">
							<pe:inputNumber id="quantity" value="#{entry.quantity}"
								decimalPlaces="0" max="9999" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column>
					<p:rowEditor />
				</p:column>
				<p:column>
					<p:commandButton update="ingredients" render="ingredients"
						icon="ui-icon-trash">
						<p:ajax listener="#{addRecipeDialog.removeEntry(entry)}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>
		</p:fieldset>
		<p:commandButton value="Mentés" update="@form" id="saveButton"
			icon="ui-icon-disk" action="#{addRecipeDialog.saveRecipe}"
			actionListener="#{addRecipeDialog.close()}"
			process=":addRecipeForm:recipeNameInput :addRecipeForm:priceRating :addRecipeForm:preparationRating :addRecipeForm:dose :addRecipeForm:editor @this" />
		<p:commandButton immediate="true" value="Mégse" id="closeButton"
			icon="ui-icon-close" update="@form"
			actionListener="#{addRecipeDialog.close()}" />
	</h:form>
</h:body>

</html>
